<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <title>流式加载</title>
    <link rel="icon" href="../image/favicon.ico">
    <link rel="stylesheet" href="../library/layui/css/layui.css" media="all">
    <style>
        .flow-default {
            width: 600px;
            height: 400px;
            overflow: auto;
            font-size: 0;
        }

        .flow-default li {
            display: inline-block;
            margin: 0 5px;
            font-size: 14px;
            width: 48%;
            margin-bottom: 10px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #eee;
        }

        .flow-default img {
            width: 100%;
            height: 100%;
        }

        .site-demo-flow {
            width: 600px;
            height: 300px;
            overflow: auto;
            text-align: center;
        }

        .site-demo-flow img {
            width: 40%;
            height: 200px;
            margin: 0 2px 5px 0;
            border: none;
        }
    </style>
</head>
<body style="padding:15px">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>信息流 - 滚动加载</legend>
</fieldset>

<ul class="flow-default" id="LAY_demo1"></ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>信息流 - 手工加载</legend>
</fieldset>

<ul class="flow-default" style="height: 300px;" id="LAY_demo2"></ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>图片懒加载</legend>
</fieldset>
<div class="site-demo-flow" id="LAY_demo3">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
    <img lay-src="../image/logo.png">
</div>

<p style="margin:20px 5px;">
    无论滚动条上滑还是下滑，都只始终加载当前屏的图片（你可以快速拉动滚动条到中间区域，然后再往上滑动试试）<br/>
    懒加载除了对滚动条的性能进行了美好的优化，也对图片的「当前屏」进行了高效计算，无惧于任何规模庞大的图片数量！
</p>

<script src="../library/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(function () {
        var flow = layui.flow;

        flow.load({
            elem: '#LAY_demo1' //流加载容器
            , scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
            , done: function (page, next) { //执行下一页的回调

                //模拟数据插入
                setTimeout(function () {
                    var lis = [];
                    for (var i = 0; i < 8; i++) {
                        lis.push('<li>' + ((page - 1) * 8 + i + 1) + '</li>')
                    }

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 10); //假设总页数为 10
                }, 500);
            }
        });

        flow.load({
            elem: '#LAY_demo2' //流加载容器
            , scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
            , isAuto: false
            , isLazyimg: true
            , done: function (page, next) { //加载下一页
                //模拟插入
                setTimeout(function () {
                    var lis = [];
                    for (var i = 0; i < 6; i++) {
                        lis.push('<li><img lay-src="../image/logo.png?v=' + ((page - 1) * 6 + i + 1) + '"></li>')
                    }
                    next(lis.join(''), page < 6); //假设总页数为 6
                }, 500);
            }
        });

        //按屏加载图片
        flow.lazyimg({
            elem: '#LAY_demo3 img'
            , scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
        });
    });
</script>
</body>
</html>